<template>
  <view>
    <view class="home">
      <view class="content_top">
        <view class="search-icon" @click="openSearch"
          ><text class="custom-icon custom-icon-shaixuan"></text
        ></view>
        <view class="view-subsection"
          ><u-subsection
            active-color="#FB5904"
            @change="tabChange"
            :list="list"
            :current="tab_current"
          ></u-subsection
        ></view>
      </view>
      <view class="charts-box"
        ><qiun-data-charts
          type="mix"
          :chartData="chartData"
          background="none"
          :echartsH5="true"
          :echartsApp="true"
          :animation="false"
          v-if="showCharts"
      /></view>
    </view>
    <view class="top-view">
      <view class="thead">
        <view class="flex1 sort-li">商品</view>
        <view class="flex1 staff-li">商品数量</view>
        <view class="flex1 cutomer-li">商品金额</view>
      </view>
      <scroll-view class="cont-ul" scroll-y="true">
        <view class="flex" v-for="(item, index) in goods_list" :key="index">
          <view class="flex1 sort-li">{{ item.title }}</view>
          <view class="flex1 staff-li">{{ item.goodsNum }}</view>
          <view class="flex1 cutomer-li">{{ item.goodsAmount }}</view>
        </view>
        <u-loadmore
          :status="load_status"
          :load-text="loadText"
          @loadmore="loadmoreData"
        />
      </scroll-view>
    </view>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="下单日期">
              <view class="date-li">
                <picker mode="date" @change="bindDateStartChange">
                  <text class="date-li">{{
                    search_data.start
                      ? $u.timeFormat(search_data.start, "yyyy-mm-dd")
                      : "开始日期"
                  }}</text>
                </picker>
              </view>
              <view class="date-line">-</view>
              <view class="date-li">
                <picker mode="date" @change="bindDateEndChange">
                  <text class="date-li">{{
                    search_data.end
                      ? $u.timeFormat(search_data.end, "yyyy-mm-dd")
                      : "结束日期"
                  }}</text>
                </picker>
              </view>
            </u-form-item>
            <u-form-item label="客户">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/customer/selCustomer')"
              >
                <text class="float_left ellipsis">{{
                  search_data.customerId ? search_data.customerName : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('customerId')"
                >
                  <u-icon
                    :name="
                      !search_data.customerId
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="客户类型">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/customer/selCustomerType')"
              >
                <text class="float_left ellipsis">{{
                  search_data.customerType
                    ? search_data.customerTypeName
                    : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('customerType')"
                >
                  <u-icon
                    :name="
                      !search_data.customerType
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="品牌">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/brand/selBrand')"
              >
                <text class="float_left ellipsis">{{
                  search_data.brandId ? search_data.brand_name : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('brandId')">
                  <u-icon
                    :name="
                      !search_data.brandId ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="商品分类">
              <view class="clearfix form-val" @click="openSel('cate_show')">
                <text class="float_left ellipsis">{{
                  search_data.category_name
                    ? search_data.category_name
                    : "请选择"
                }}</text>
                <view class="float_right"
                  ><u-icon
                    :name="
                      !search_data.categoryId
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon
                ></view>
              </view>
            </u-form-item>
          </u-form>
        </view>
        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
        </view>
      </view>
    </u-popup>
    <tki-tree
      style="z-index: 99"
      ref="tkitree"
      :selectParent="true"
      :range="cate_list"
      rangeKey="title"
      @confirm="cateConfirm"
    ></tki-tree>
  </view>
</template>

<script>
import tkiTree from "@/components/tki-tree/tki-tree.vue";
export default {
  components: {
    tkiTree,
  },
  data() {
    return {
      loadText: {
        loadmore: "点击加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      list: [
        {
          name: "按商品",
        },
        {
          name: "按分类",
        },
      ],
      tab_current: 0,
      chartData: {
        categories: [],
        series: [],
      },
      page: 1,
      pageSize: 10,
      total: 0,
      goods_list: [],
      load_status: "nomore",
      type: 1,
      search_show: false,
      search_data: {
        start: "",
        end: "",
        customerId: "",
        customerName: "",
        customerType: "",
        customerTypeName: "",
        brandId: "",
        brand_name: "",
        category_name: "",
        categoryId: "",
      },
      customerData: {},
      brandData: {},
      customerTypeData: {},
      cate_list: [],
      showCharts: true, // 控制图表显示
    };
  },
  onLoad() {
    this.goods();
    this.getAllCategory();
  },

  onPullDownRefresh() {
    this.page = 1;
    this.goods();
  },
  watch: {
    search_show(val) {
      if (val) {
        console.log("弹窗已打开");
        this.showCharts = false; // 隐藏图表
      } else {
        console.log("弹窗已关闭");
        this.showCharts = true; // 隐藏图表
      }
    },
    // 客户
    customerData(val) {
      if (val) {
        this.search_data.customerName = val.name;
        this.search_data.customerId = val.id;
      }
    },
    //品牌
    brandData(val) {
      if (val.id) {
        this.search_data.brandId = val.id;
        this.search_data.brand_name = val.title;
      }
    },
    // 客户类型
    customerTypeData(val) {
      if (val) {
        this.search_data.customerTypeName = val.name;
        this.search_data.customerType = val.id;
      }
    },
  },
  methods: {
    loadmoreData() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.goods();
      }
    },
    tabChange(index) {
      this.search_data = {
        start: "",
        end: "",
        customerId: "",
        customerName: "",
        customerType: "",
        customerTypeName: "",
        brandId: "",
        brand_name: "",
        category_name: "",
        categoryId: "",
      };
      this.tab_current = index;
      this.type = index + 1;
      this.page = 1;
      this.goods();
    },
    openSearch() {
      this.search_show = true;
    },
    goods() {
      this.load_status = "loading";
      this.$u.api
        .goods({
          page: this.page,
          pageSize: this.pageSize,
          categoryId: this.search_data.categoryId,
          brandId: this.search_data.brandId,
          startTime: this.search_data.start,
          endTime: this.search_data.end,
          type: this.type,
          customerId: this.search_data.customerId,
          customerType: this.search_data.customerType,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (this.page === 1) {
            this.goods_list = res.data;
          } else {
            this.goods_list = this.goods_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
          const goodsName = [];
          const goodsNum = [];
          const goodsAmount = [];
          this.$nextTick(() => {
            res.data.forEach((value) => {
              goodsName.push(value.title);
              goodsNum.push(Number(value.goodsNum));
              goodsAmount.push(Number(value.goodsAmount));
            });
            this.setChartData(goodsName, goodsNum, goodsAmount);
          });
        });
    },
    setChartData(goodsName, goodsNum, goodsAmount) {
      this.chartData = {
        categories: goodsName,
        series: [
          {
            name: "商品金额",
            data: goodsAmount,
            index: 1,
            // #ifdef APP-PLUS
            type: "bar",
            // #endif
            // #ifdef MP-WEIXIN
            type: "column",
            // #endif
          },
          {
            name: "商品数量",
            data: goodsNum,
            type: "line",
            style: "curve",
            // #ifdef APP-PLUS
            yAxisIndex: 1,
            smooth: true,
            // #endif
            disableLegend: true,
          },
        ],
      };
    },
    bindDateStartChange(e) {
      this.search_data.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_data.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    clearValue(params) {
      if (!params) {
        this.search_data = {
          start: "",
          end: "",
          customerId: "",
          customerName: "",
          customerType: "",
          customerTypeName: "",
          brandId: "",
          brand_name: "",
          category_name: "",
          categoryId: "",
        };
        this.searchConfirm();
      } else {
        this.search_data[params] = "";
      }
    },
    searchConfirm() {
      this.search_show = false;
      this.page = 1;
      this.goods();
    },
    openSel(key) {
      if (key === "cate_show") {
        this.$refs.tkitree._show();
        return;
      }
    },
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.cate_list = res.data;
        });
    },
    cateConfirm(arr) {
      this.search_data.category_name = arr[0].title;
      this.search_data.categoryId = arr[0].id;
    },
  },
};
</script>

<style lang="scss" scoped>
.charts-box {
  width: 730rpx;
  /* #ifdef MP-WEIXIN */
  height: 450rpx;
  /* #endif */
  /* #ifdef APP-PLUS */
  height: 550rpx;
  /* #endif */
  margin: 0 auto;
}

.home {
  position: relative;
  /* #ifdef MP-WEIXIN */
  padding-top: 100rpx;
  /* #endif */
  .content_top {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 20rpx;
    .view-subsection {
      width: 300rpx;
      margin: 0 auto;
    }
    .search-icon {
      position: absolute;
      right: 20rpx;
      width: 80rpx;
      top: 16rpx;
      text-align: center;
    }
  }
}

.top-view {
  width: 100%;
  z-index: 9;

  .thead {
    line-height: 60rpx;
    height: 60rpx;
    font-size: 24rpx;
    background-color: #f5f5f5;
    display: flex;
    width: 100%;
  }

  .search-view {
    width: 100%;
  }
}

.flex1 {
  display: table-cell;

  text-align: center;
  position: relative;
  height: 100%;
  vertical-align: middle;

  &.staff-li {
    width: 33%;
  }

  &.sort-li {
    width: 33%;
  }

  &.cutomer-li {
    width: 33%;
  }
}

.cont-ul {
  height: calc(100vh - 620rpx);
  background-color: #ffffff;

  .flex {
    height: 70rpx;
  }
}

.flex {
  display: table;
  width: 750rpx;
  font-size: 24rpx;
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
